<template>
  <view class="index-content">
    <view class="index-block">
      <view class="charts-box">
        <qiun-data-charts 
          type="tline"
          :opts="lineopts"
          :chartData="lineData"
        />
      </view>	
      <view class="charts-box">
        <qiun-data-charts 
          type="area"
          :opts="areaopts"
          :chartData="areaData"
          tooltipFormat="tooltipDemo1"
        />
      </view>
      <view class="index-block-title">运行统计</view>
      <up-row gutter="16">
        <up-col span="4">
          <view class="item-tj item-tj-frist">
            <view style="padding: 16rpx; height: 100%; position: relative;">
              <view style="display: flex; color: white;">
                <up-icon name="photo" color="#fff"></up-icon>
                <text>在线人数</text>
              </view>
              <view style="position: absolute; bottom: 48rpx; right: 16rpx;">
                <up-count-to :startVal="0" :endVal="149" :duration="1500" color="#fff" separator=","></up-count-to>
              </view>
            </view>
          </view>
        </up-col>
        <up-col span="4">
          <view class="item-tj item-tj-second">
            <view style="padding: 16rpx; height: 100%; position: relative;">
              <view style="display: flex; color: white;">
                <up-icon name="photo" color="#fff"></up-icon>
                <text>今日新增</text>
              </view>
              <view style="position: absolute; bottom: 48rpx; right: 16rpx;">
                <up-count-to :startVal="1" :endVal="2349" :duration="1500" color="#fff" separator=","></up-count-to>
              </view>
            </view>
          </view>
        </up-col>
        <up-col span="4">
          <view class="item-tj item-tj-thrid">
            <view style="padding: 16rpx; height: 100%; position: relative;">
              <view style="display: flex; color: white;">
                <up-icon name="photo" color="#fff"></up-icon>
                <text>总人数</text>
              </view>
              <view style="position: absolute; bottom: 48rpx; right: 16rpx;">
                <up-count-to :startVal="1" :endVal="1249350" :duration="1500" color="#fff" separator=","></up-count-to>
              </view>
            </view>
          </view>
        </up-col>
      </up-row>
    </view>
    <view class="index-block">
      <view class="index-block-title">近7天访问量统计</view>
      <view>
        <qiun-data-charts type="line" canvasId="finance_a" :canvas2d="isCanvas2d" :resshow="delayload"
          :opts="{xAxis:{itemCount:12,disableGrid:true},yAxis:{disableGrid:true,data:[{disabled:true}]}}"
          :chartData="historyData" />
      </view>
      <view class="index-block-title">访问量统计</view>
      <view>
        <qiun-data-charts type="bar" canvasId="finance_b" :canvas2d="isCanvas2d" :resshow="delayload"
          :opts="{xAxis:{disabled: true,disableGrid:true},extra:{bar:{barBorderCircle:true,width:20}},legend:{show:false}}"
          :chartData="historyData" />
      </view>
    </view>
    <view class="index-block">
      <view class="index-block-title">数据总览</view>
      <view class="detail_list">
        <view v-for="(item, index) in detail_list" :key="index" class="detail_item">
          <view>
            <view class="font-middle">{{item.date}}</view>
            <view class="font-small">{{item.time}}</view>
          </view>
          <view class="icon"><li :class="['iconfont', item.type === 'income' ? 'icon-income' : 'icon-expend']"></li></view>
          <view class="right_content">
            <view class="money">{{item.type === 'income' ? '+' : '-'}}{{item.money}}</view>
            <view class="text-gray font-middle">{{item.desc}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

// 获取当前日期信息
const _now = new Date();
const now_time = {
  year: _now.getFullYear(),
  month: _now.getMonth() + 1,
  day: _now.getDay()
};

// 初始化数据
const lineData = ref<{ series: { name: string; data: [number, number][]; }[] }>({} as any);
const areaData = ref<{ categories: string[]; series: { name: string; data: number[]; }[] }>({} as any);
const lineopts = ref({
  dataLabel: false,
  yAxis: {
    data: [
      {
        min: -50,
        max: 50
      }
    ]
  }
});
const areaopts = ref({
  dataLabel: false,
  color: ["#ff0024"],
  yAxis: {
    splitNumber: 4,
    data: [
      {
        min: 1,
        max: 5,
        format: "yAxisDemo3",
      }
    ]
  },
  extra: {
    area: {
      type: "step",
      opacity: 0.3,
      addLine: true,
      width: 2,
      gradient: false,
      activeType: "hollow"
    }
  }
});
const isCanvas2d = ref(true);
const delayload = ref(false);
const historyData = ref({
  "categories": [
    "1月",
    "2月",
    "2月",
    "4月",
    "5月"
  ],
  "series": [
    {
      "name": "收入情况",
      "data": [1601, 1840.5, 1900, 1760, 1500.85],
      "type": "line",
      "style": "curve",
      "color": "#4ECDB6",
      "unit": ""
    }
  ],
  "yAxis": [
    { "calibration": true, "position": "left", "title": "单位/元", "titleFontSize": 12, "unit": "", "tofix": 0, "min": 0, "disableGrid": true }
  ]
});
const detail_list = ref([
  { date: now_time.month + "-01", time: "11:01", type: "extend", money: "10.00", desc: "银行卡转出" },
  { date: now_time.month + "-01", time: "13:45", type: "income", money: "18.00", desc: "银行卡收入" },
  { date: now_time.month + "-02", time: "06:21", type: "extend", money: "123.45", desc: "信用卡转出" },
  { date: now_time.month + "-03", time: "07:38", type: "income", money: "23.00", desc: "银行卡收入" },
  { date: now_time.month + "-08", time: "16:28", type: "extend", money: "23.56", desc: "信用卡转出" },
  { date: now_time.month + "-09", time: "15:25", type: "income", money: "850.12", desc: "银行卡收入" },
  { date: now_time.month + "-09", time: "18:52", type: "income", money: "1.88", desc: "银行卡收入" },
  { date: now_time.month + "-11", time: "21:12", type: "extend", money: "220.21", desc: "银行卡转出" },
  { date: now_time.month + "-12", time: "13:08", type: "income", money: "32.28", desc: "银行卡收入" },
  { date: now_time.month + "-12", time: "12:41", type: "extend", money: "122.12", desc: "信用卡转出" },
  { date: now_time.month + "-13", time: "17:21", type: "income", money: "10.00", desc: "银行卡收入" },
]);

// 模拟从服务器获取数据
const getServerData = () => {
  setTimeout(() => {
    const lineres = {
      series: [
        {
          name: "eeg信号",
          data: [
            [1, -0.08980486], [2, 11.86656005], [3, -5.009513045], [4, 3.18512238], [5, -3.824844176],
            [6, 10.85308639], [7, -13.67815144], [8, 8.122799903], [9, -6.74691901], [10, 0.71552101], [11, 7.854071509],
            [12, -8.240731193], [13, 0.44014832], [14, 3.078094235], [15, 2.324649857], [16, -5.00606922], [17, -1.411413866],
            [18, 3.287314267], [19, 4.602246056], [20, -7.602620371], [21, 0.409318354], [22, 5.371725693], [23, -1.707822165], [24, -6.048236962],
            [24, 2.870973262], [25, 8.815812402], [26, -8.446993843], [27, -0.367218287], [28, 0.905251565], [29, 8.573349014], [30, -11.71735084]
          ]
        }
      ]
    };
    const areares = {
      categories: ["0", "30", "90", "120", "150", "180"],
      series: [
        {
          name: "睡眠分期结果",
          data: [1, 2, 4, 4, 3, 2]
        }
      ]
    };
    lineData.value = JSON.parse(JSON.stringify(lineres));
    areaData.value = JSON.parse(JSON.stringify(areares));
  }, 500);
};

// 页面加载完成后获取数据，将 onReady 改为 onMounted
onMounted(() => {
  getServerData();
});
</script>

<style lang="scss" scoped>

/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
  width: 100%;
  height: 300px;
}
.index-content {
  background-color: #f3f4f6;
  min-height: 100vh;
}
.index-block {
  padding: 40rpx;
  background-color: #fff;
}
.index-block-title {
  font-size: 40rpx;
  font-weight: bold;
  padding: 0 0 40rpx 0;
}
.item-tj {
  width: 100%;
  height: 160rpx;
  border-radius: 16rpx;
  
  &-frist {
    background-color: rgba($color: #2979ff, $alpha: 0.8);
    // background-image: url('/static/img/bg/qb.png');
  }

  &-second {
    background-color: rgba($color: #303133, $alpha: 0.8);
    // background-image: url('/static/img/bg/qb.png');
  }

  &-thrid {
    background-color: rgba($color: #19be6b, $alpha: 0.8);
    // background-image: url('/static/img/bg/qb.png');
  }
}
.detail_list{
  height: 700rpx;
  overflow: auto;
  color: #9E9E9E;
  .detail_item{
    display: flex;
    margin: 20rpx 0;
    align-items: center;
    .icon{
      width: 30%;
      text-align: center;
      li{
        font-size: 80rpx;
      }
    }
    .right_content{
      width: 50%;
      text-align: center;
    }
    .icon-income{
      color:#4AABF9;
    }
    .icon-expend{
      color: #E45521;
    }
    .money{
      color: #000;
    }
  }
}
</style>